<template>
	<el-drawer v-model="isDrawerVisible" title="用户详情" :with-header="true">
	    <el-descriptions
	        direction="vertical"
	        :column="2"
	        border
	    >
			<el-descriptions-item label="用户编号">{{user.yhbh}}</el-descriptions-item>
			<el-descriptions-item label="用户名">{{user.yhm}}</el-descriptions-item>
			<el-descriptions-item label="用户昵称">{{user.yhnc}}</el-descriptions-item>
			<el-descriptions-item label="用户身份">
				{{user.yhsf==0?'管理员':(user.yhsf==3?'用户':'普通管理员')}}
			</el-descriptions-item>
			<el-descriptions-item label="性别">{{user.sex}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{user.sjh}}</el-descriptions-item>
			<el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
			<el-descriptions-item label="注册时间" :span="2">{{user.zcsj}}</el-descriptions-item>
			<el-descriptions-item label="用户头像" :span="2">
				<el-image style="width: 200px; height: 200px; border-radius: 10px;"
				      :src="'/api/show/'+user.yhtx"
				      :preview-src-list="['/api/show/'+user.yhtx]"
				      fit="cover"
				/>
			</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const user = ref({
	yhbh: '',
	yhm: '',
	yhnc: '',
	yhsf: '',
	sex: '',
	sjh: '',
	email: '',
	zcsj: '',
	yhtx: ''
});

// 接收父组件传递过来的 用户 数据
const handleDetailData = (obj) => {
	isDrawerVisible.value = true;
	user.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
	handleDetailData
})
</script>

<style scoped>
</style>